<template>
  <base-module
    class="units-comp"
    :title="title"
    @icon-click="handleClick"
    v-bind="$attrs"
    v-on="$listeners">
    <ul class="list-container">
      <template v-for="(item, index) in options">
        <li class="list-item" :key="index">
          <span :class="['list-item-label', options.length > 4 ? 'label-width' : '']" :title="item.label">
            {{ item.label }}
          </span>
          <span class="list-item-text" :title="item.text">
            {{ item.text }}
          </span>
        </li>
      </template>
    </ul>
  </base-module>
</template>

<script>
import BaseModule from '@/components/public/BaseModule';

export default {
  name: 'unitsComp',
  components: {
    BaseModule
  },
  props: {
    title: {
      type: [String, Object],
      default: '参建单位'
    }
  },
  data() {
    return {};
  },
  computed: {
    currentProjectInfo() {
      return this.$store.state.currentProjectInfo;
    },
    options() {
      const info = this.currentProjectInfo || {};
      const options = {
        constructor: '建设单位',
        builder: '施工单位',
        designer: '设计单位',
        supervisor: '监理单位',
        surveyor: '勘察单位'
      };
      const unitData = [];
      Object.keys(options).forEach(name => {
        const text = info[name] || '';
        unitData.push({
          label: options[name],
          text
        });
      });
      return unitData;
    }
  },
  methods: {
    handleClick() {
      this.$router.push('/comprehensive/information');
    },
  },
};
</script>

<style scoped lang="scss">
  .units-comp {
    .list-container {
      width: 100%;
      height: 100%;
      padding-top: 10px;
      overflow-y: auto;
      .list-item {
        display: flex;
        align-items: flex-start;
        justify-content: left;
        color: rgba(179, 189, 248, .6);
        min-height: 33px;
        width: 100%;
        font-size: 14px;
        padding-left: 15px;
        border-bottom: 1px solid rgba(45, 56, 123, .2);
        overflow: hidden;
        .list-item-label {
          margin-right: 20px;
          width: 100px;
          min-height: 33px;
          display: flex;
          align-items: center;
        }
        .list-item-text {
          color: #fff;
          width: calc(100% - 100px);
          min-height: 33px;
          display: flex;
          align-items: center;
          line-height: 25px;
        }
      }
    }
  }
</style>
